import React, { useState } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { debounce } from '@/utils/helper';
import { View, Button, Text, Image, Input } from '@tarojs/components';
import Taro from '@tarojs/taro';
import infoImg from '@/giftCardSubPack/images/giftCardSelect/info.png';
import './index.scss';

const EInvoice = ({ appConfig }) => {
  const [isActiveTab, setIsActiveTab] = useState(true);

  const handleTabs = (active) => {
    setIsActiveTab(active);
  };

  const handleSave = debounce(() => {
    Taro.redirectTo({ url: '/orderSubPack/confirmOrder/index' });
  }, 2000);

  return (
    <View className="eInvoice">
      <View className="inner-wrap">
        <View className="inner">
          <View className="alert-info mb84">
            <View className="clean-white">
              <Image src={infoImg} className="info-img" />
            </View>
            <View className="text">
              {appConfig?.name}商城全面启用电子发票，订单中自营商品将在确认收货后48小时内为您开具
              <Text className="link">电子普通发票</Text>
            </View>
          </View>
          <View className="title-label">发票抬头</View>
          <View className="tabs">
            <View
              className={classNames('tab-item', { inactive: !isActiveTab })}
              onClick={() => handleTabs(true)}
            >
              个人/政府事业单位
            </View>
            <View
              className={classNames('tab-item', { inactive: isActiveTab })}
              onClick={() => handleTabs(false)}
            >
              企业
            </View>
          </View>
          {isActiveTab && (
            <>
              <View className="input-view ml8">
                <Input
                  value=""
                  placeholder="请输入组织机构代码（必填）"
                  placeholderClass="placeholder"
                />
              </View>
            </>
          )}
          {!isActiveTab && (
            <>
              <View className="input-view ml8">
                <Input
                  value=""
                  placeholder="请输入公司名称（必填）"
                  placeholderClass="placeholder"
                />
              </View>
              <View className="input-view ml8 mt29">
                <Input
                  value=""
                  placeholder="请输入纳税人识别号（必填）"
                  placeholderClass="placeholder"
                />
              </View>
            </>
          )}
          <View className="title-label mt58">收票人邮箱</View>

          <View className="input-view ml8">
            <Input value="" placeholder="请输入收票人邮箱" placeholderClass="placeholder" />
          </View>

          <View className="alert-info operation-info">
            <View className="clean-white">
              <Image src={infoImg} className="info-img" />
            </View>
            <View className="text">
              若您需要下载打印电子普通发票，可进入“我的-电子发票 -发票记录”自行下载。
            </View>
          </View>
          <View className="btn-bottom">
            <Button className="btn" onClick={handleSave}>
              完成
            </Button>
          </View>
        </View>
      </View>
    </View>
  );
};
export default connect(({ otherApi }) => ({
  appConfig: otherApi.appConfig,
}))(EInvoice);
